<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-arrow-left"></i>主页</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
<!--        <div class="ms-doc">-->
<!--            <h3>主页显示</h3>-->
<!--            <article>-->
<!--                <h1>公告</h1>-->
<!--&lt;!&ndash;                <p>基于Vue.js 2.x系列 + Element UI后台管理系统 + SpringBoot架构</p>&ndash;&gt;-->
<!--                <p>基于Vue.js 2.x系列 + Element UI后台管理系统 + SpringBoot架构</p>-->
<!--                <h2>功能</h2>-->
<!--                <el-checkbox disabled checked>Element UI</el-checkbox>-->
<!--                <br>-->
<!--                <el-checkbox disabled checked>登录/注销</el-checkbox>-->
<!--                <br>-->
<!--                <el-checkbox disabled checked>用户管理</el-checkbox>-->
<!--                <br>-->
<!--                <el-checkbox disabled checked>角色管理</el-checkbox>-->
<!--                <br>-->
<!--                <el-checkbox disabled checked>权限管理</el-checkbox>-->
<!--                <br>-->
<!--            </article>-->
<!--        </div>-->

        <el-carousel :interval="4000" type="card" height="1000px">
            <el-carousel-item v-for="(item,index) in tableData" :key="index">
                <div class="ms-doc"   >
                    <h3>公告类型:{{item.noticeType}}</h3>
                    <article style="height: 400px">
                        <h1 v-text="item.title"></h1>
                        <el-col :span="8">
                            <h5 style="color: #8c939d;display: inline-block;">发布者：{{item.createdUser}}</h5>
                        </el-col>
                        <el-col :span="8">
                            <h5 style="color: #8c939d;display: inline-block;">发布时间：{{item.createTime}}</h5>
                        </el-col>
                        <el-col :span="8">
                            <h5 style="color: #8c939d;display: inline-block;">修改时间：{{item.updateTime}}</h5>
                        </el-col>
                        <br>
                         <h2>内容：</h2>
                         <h4 disabled checked ></h4>
                        <br>
                        <span v-html="item.information"></span>

                    </article>
                </div>
            </el-carousel-item>
        </el-carousel>


    </div>
</template>

<script>
    export default {
        data: function(){
            return {
                tableData:[],
                totalCount:0
            }
        },

        created() {
            this.handleQuery()
        },
        methods:{
            handleQuery() {
                this.$axios.get(this.$config.SYSTEM_HOST + "/notice/query1").then((res) => {
                    this.tableData = res.data.data.rows;
                    this.totalCount = res.data.data.totalCount;
                });
            }
        }


    }
</script>

<style scoped>
    .ms-doc{
        width:100%;
        max-width: 980px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    }
    .ms-doc h3{
        padding: 9px 10px 10px;
        margin: 0;
        font-size: 14px;
        line-height: 17px;
        background-color: #f5f5f5;
        border: 1px solid #d8d8d8;
        border-bottom: 0;
        border-radius: 3px 3px 0 0;
    }
    .ms-doc article{
        padding: 45px;
        word-wrap: break-word;
        background-color: #fff;
        border: 1px solid #ddd;
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
    }
    .ms-doc article h1{
        font-size:32px;
        padding-bottom: 10px;
        margin-bottom: 15px;
        border-bottom: 1px solid #ddd;
    }
    .ms-doc article h2 {
        margin: 24px 0 16px;
        font-weight: 600;
        line-height: 1.25;
        padding-bottom: 7px;
        font-size: 24px;
        border-bottom: 1px solid #eee;
    }
    .ms-doc article p{
        margin-bottom: 15px;
        line-height: 1.5;
    }
    .ms-doc article .el-checkbox{
        margin-bottom: 5px;
    }
</style>
